.hv-designer-layer-panel-tree-ul {
  display   : block;
  list-style: none;
  padding   : 0;
  margin    : 0;

  li {
    padding: 0;
    margin : 0;

    .hv-designer-layer-panel-move-item {
      height: 4px;
    }

    .hv-designer-layer-panel-move-item-enter {
      height          : 4px;
      background-color: var(--hv-primary-color);
    }

    .hv-designer-layer-panel-item {
      height       : 42px;
      display      : flex;
      padding      : 8px;
      transition   : 0.3s;
      color        : var(--hv-dash-des-layer-panel-item-color);
      border       : var(--hv-border-width-base) var(--hv-border-style-base) var(--hv-dark-bor-color);
      border-radius: var(--hv-border-radius-sm);
      cursor       : pointer;
      align-items  : center;

      &:hover {
        color     : var(--hv-dash-des-layer-panel-item-hov-color);
        background: var(--hv-dash-des-layer-panel-item-hov-bg);
      }

      .hv-designer-layer-panel-checked {
        width       : 35px;
        margin-right: 6px;

        :deep(.ant-checkbox) {
          top: 2.5px;
        }

        :deep(.ant-checkbox .ant-checkbox-inner) {
          background-color: rgba(255, 255, 255, 0.08);
          border-color    : var(--hv-dark-bor-color);
        }

        :deep(.ant-checkbox-checked .ant-checkbox-inner) {
          background-color: var(--hv-primary-color);
          border-color    : var(--hv-primary-color);
        }
      }

      .hv-designer-layer-panel-preview {
        width     : 25px;
        height    : 20px;
        margin-top: -5px;

        img {
          width : 25px;
          height: 20px;
        }
      }

      .hv-designer-layer-panel-info {
        margin-left: 8px;
        height     : 24px;
        line-height: 24px;

        .hv-designer-layer-panel-header {
          height         : 100%;
          display        : flex;
          display        : flex;
          justify-content: space-between;

          .hv-designer-layer-panel-label {
            height       : 100%;
            overflow     : hidden;
            text-overflow: ellipsis;
            white-space  : nowrap;
            margin-right : 5px;

            :deep(.ant-input-affix-wrapper) {
              padding-left    : 4px;
              padding-right   : 2px;
              background-color: var(--hv-dash-des-layer-panel-item-input-bg);
              border-color    : var(--hv-dark-bor-color);
              .anticon {
                color: var(--hv-dash-des-layer-panel-item-input-color);
              }
            }

            :deep(.ant-input) {
              padding-left    : 4px;
              padding-right   : 2px;
              border-color    : var(--hv-dark-bor-color);
              color           : var(--hv-dash-des-layer-panel-item-input-color);
              background-color: var(--hv-dash-des-layer-panel-item-input-bg);
              height          : 22px;
            }
          }

          .hv-designer-layer-panel-arrow {
            width     : 25px;
            text-align: center;
          }
        }
      }
    }
  }
}